<template>
  <div v-if="$slots.dialogSlot" @click="handleShow">
    <slot name="dialogSlot"></slot>
  </div>
  <div v-if="!$slots.dialogSlot">
    <slot name="dialogSlot">
      <el-input class="input-with-select" clearable placeholder="请选择" readonly>
        <template #suffix>
          <vab-icon icon="close-circle-line" />
        </template>
        <template #append>
          <el-button :icon="Search" @click="handleShow" />
        </template>
      </el-input>
    </slot>
  </div>
  <vab-dialog
    v-model="dialogFormVisible"
    :before-close="handleClose"
    :close-on-click-modal="true"
    show-fullscreen
    :title="titleRef"
    :width="widthRef"
  >
    <div>
      <div v-show="editable">
        <vab-query-form>
          <vab-query-form-top-panel :span="16">
            <el-button @click="onCancel">取消</el-button>
            <el-button type="primary" @click="onhandleSubmit">保存</el-button>
          </vab-query-form-top-panel>
        </vab-query-form>
        <CommonForm
          ref="formRef"
          v-model="form"
          v-loading="option.formLoading"
          :layout-config="option.layoutConfig"
          :option="option"
          @on-extend-validate="onHandleExtendValidate"
          @on-submit="onhandleSubmit"
          @on-success="onHandleSucess"
        />
      </div>
      <div v-show="!editable">
        <KingTable ref="kingTable" :tableOptions="_tableOptions" @handle-btn-click="handleBtnAction">
          <!-- 表格操作 -->
          <template #operation="scope">
            <TableRowBtns :row="scope.row" :detailShow="false" @handle-row-action="handleBtnAction" />
          </template>
        </KingTable>
      </div>
    </div>
  </vab-dialog>
</template>

<script setup lang="tsx" name="RoleList">
import { ref, reactive } from "vue";
import KingTable from "@/components/KingTable/index.vue";
import TableRowBtns from "@/components/KingTable/components/TableRowBtns.vue";
import { operateType } from "@/plugins/commonType.enum";
import VabDialog from "@/plugins/VabDialog/index.vue";
import { Search } from "@element-plus/icons-vue";
import { TableColumnOrFormTypeEnum } from "@/plugins/commonType.enum";
import CommonForm from "@/plugins/form/CommonForm.vue";
import { doAdd, doUpdate, getDetails } from "@/api/mains";
import { succMsg, failMsg } from "@/utils/MessageUtils";
import { ElLoading } from "element-plus";

const titleRef = ref("");
const widthRef = "1000";
const dialogFormVisible = ref();
const editable = ref(false);

// 获取 KingTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const kingTable = ref();

// 如果表格需要初始化请求参数，直接定义传给 KingTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const _initParam = reactive({ EQ_ss: 1 });

// 表格配置项
const _tableCols = [
  { type: "selection", fixed: "left", align: "center", width: 60 },
  { type: "index", label: "序号", align: "center", width: 60 },
  {
    prop: "content",
    label: "常用语",
    overflow: true,
    width: 480
  },
  {
    prop: "mts",
    label: "更新时间",
    width: 180
  },
  { prop: "operation", label: "操作", fixed: "right", width: 160 }
];

const _searchCols = [
  {
    prop: "content",
    label: "常用语",
    width: 100,
    el: "input"
  }
];

const _tableOptions = {
  title: "流程常用语",
  queryUrl: "processWords/query",
  operUrl: "processWords",
  tableColumns: _tableCols,
  searchColumns: _searchCols,
  initParam: _initParam
};

// 重新拉取表格数据
const fetchTableData = () => {
  kingTable.value?.getTableList();
};

/**
 * 增删查按钮执行的业务操作
 * @param {*} type 当前执行操作的类型
 * @param {*} row
 */
const handleBtnAction = async (type: string, row: any) => {
  switch (type) {
    case operateType.ADD: //新增操作
      form.value.id = "";
      form.value.content = "";
      editable.value = true;
      break;
    case operateType.EDIT: //编辑操作
      onDetail(row);
      break;
    case operateType.DETAIL: //查询操作
      editable.value = true;
      break;
    case operateType.DEL: // 删除操作
      kingTable.value?.handleDelete(row);
      break;
    case operateType.BATCH_DEL: // 批量删除操作
      kingTable.value?.handleBatchDelete();
      break;
  }
};

const handleShow = () => {
  dialogFormVisible.value = true;
};
const handleClose = () => {
  dialogFormVisible.value = false;
};

const option = ref();
const form = ref({
  id: "",
  content: ""
});
option.value = {
  formLoading: false,
  layoutConfig: {
    column: 2,
    columnGap: "40px"
  },
  column: [
    {
      label: "常用语",
      prop: "content",
      type: TableColumnOrFormTypeEnum.TEXTAREA,
      placeholder: "请输入备注常用语",
      expand: 2
    }
  ],
  formConfig: {
    title: "",
    labelPosition: "right",
    labelWidth: "120px",
    isInModal: true,
    disabled: false
  },
  btnsConfig: {
    save: {
      isShow: false
    },
    back: {
      isShow: false
    }
  },
  rules: {
    content: [
      {
        required: true,
        min: 1,
        max: 100,
        trigger: "blur",
        message: "请输入常用语"
      },
      {
        max: 200,
        message: "输入长度 1 至 200",
        trigger: "blur"
      }
    ]
  }
};

const onHandleExtendValidate = () => {
  option.value.isValidatePass = true;
};
const onhandleSubmit = async () => {
  const loading = ElLoading.service({
    lock: true,
    text: "保存中，请稍候...",
    background: "rgba(0, 0, 0, 0.7)"
  });

  let response = { code: 200, msg: "" };
  //没有传url，则自己提交
  if (form.value.id == "") {
    response = await doAdd("processWords", form.value);
  } else {
    response = await doUpdate("processWords", form.value);
  }
  loading.close();
  if (response.code == 200) {
    succMsg(response.msg);
    onCancel();
    fetchTableData();
  } else {
    failMsg(response.msg);
  }
};

const onDetail = async (row: any) => {
  const response: any = await getDetails("processWords", row.id);
  if (response.code == 200) {
    form.value = response.data;
    editable.value = true;
  } else {
    failMsg(response.msg);
  }
};

const onCancel = () => {
  editable.value = false;
};

const onHandleSucess = () => {
  //数据提交成功，抛出事件
  console.warn("sucess");
};
</script>

<style lang="scss" scoped></style>
